<template>
  <div class="login">
    <!-- <div class="header">
      <div class="header1">东营区</div>
      <div class="header2">河道水位站自动监测预警系统</div>
    </div>-->
    <div class="center">
      <div class="centerR">
        <div class="inputCenter">
          <div class="inputTop">
            <img src="../../assets/png/weaterLogo.png" alt />
            <div class="title">
              <div class="text1">东营区</div>
              <div class="text2">综合行政执法局防汛监测预警系统</div>
            </div>
          </div>
          <div class="input_cont">
            <el-input
              placeholder="请输入组织名称编号"
              v-model="canpanyCode"
              clearable
              maxlength="6"
              @blur="blurUser(canpanyCode)"
            ></el-input>
            <div v-show="loginshow">
              <el-input
                placeholder="请输入手机号"
                v-model="username"
                clearable
                @change="changeUser(username)"
              ></el-input>
              <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
            </div>
            <div v-show="!loginshow">
              <el-input placeholder="请输入手机号" maxlength="11" v-model="number" clearable></el-input>
              <el-input placeholder="请输验证码" v-model="code" class="input-with-select">
                <el-button
                  slot="append"
                  class="bottonSerch"
                  v-show="codeshow"
                  @click="getCode"
                >获取验证码</el-button>
                <el-button slot="append" class="bottonSerch" v-show="!codeshow">{{ codeMit }}秒</el-button>
              </el-input>
            </div>
            <div class="flooter">
              <el-checkbox-group v-model="type">
                <el-checkbox label="7天内免密码登录" name="type"></el-checkbox>
              </el-checkbox-group>

              <span class="text3">
                <img class="lawOffice" src="../../assets/png/lawOffice.png" alt /> 东营区综合行政执法局
              </span>
            </div>
            <div class="primary" @click="login">登录</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <span class="text5">系统开发：东营市旭瑞智能科技股份有限公司</span>
      技术支持：0546-7773897
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  components: {},
  data() {
    return {
      loginshow: false,
      codeshow: true,
      options: [],
      canpanyCode: localStorage.getItem("canpanyCode"),
      companyId: "",
      username: null,
      password: null,
      number: null,
      code: null,
      type: [],
      freeLogin: null,
      codeMit: 60
    };
  },
  methods: {
    toTree(data) {
      // 删除 所有 children,以防止多次调用
      data.forEach(function(item) {
        delete item.children;
      });

      // 将数据存储为 以 id 为 KEY 的 map 索引数据列
      var map = {};
      data.forEach(function(item) {
        map[item.id] = item;
      });
      //        console.log(map);
      var val = [];
      data.forEach(function(item) {
        // parentId,去map对象中找到索引的id
        var parent = map[item.parentId];
        // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
          val.push(item);
        }
      });
      return val;
    },
    //获取公司id下拉列表
    blurUser(code) {
      this.$http.post("login/getCompanyId", { code: code }).then(res => {
        console.log(res);
        if (res.code == 1) {
          localStorage.setItem("companyCode", this.canpanyCode);
          localStorage.setItem("companyId", res.data);
          this.companyId = res.data;
        } else {
          this.$message({
            message: "公司编号不存在",
            type: "error",
            center: true
          });
        }
      });
    },
    //切换
    switchLogin() {
      // this.loginshow = !this.loginshow;
    },
    //用户名验证
    changeUser(user) {
      this.$http.post("login/checkTel", { username: user }).then(res => {
        console.log(res);
        if (res) {
          console.log("用户名存在");
        } else {
          this.$message({
            message: "用户名不存在",
            type: "error",
            center: true
          });
        }
      });
    },
    //手机号验证
    changeNumber(num) {
      let regular = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!regular.test(num)) {
        this.$message({
          message: "请输入正确的手机号",
          type: "error",
          center: true
        });
      } else {
        this.$http.post("login/checkTel", { username: num }).then(res => {
          console.log(res);
          if (res) {
            console.log("用户存在");
          } else {
            this.$message({
              message: "该用户没有权限",
              type: "error",
              center: true
            });
          }
        });
      }
    },
    //获取验证码
    getCode() {
      this.$http
        .post("login/sendUsername ", {
          username: this.number,
          companyId: localStorage.getItem("companyId")
        })
        .then(res => {
          console.log(res);
          if (res.code == 1) {
            this.$message({
              message: res.message,
              type: "success",
              center: true
            });
            this.codeshow = false;
            clearInterval(interval);
            this.codeMit = 60;
            let interval = setInterval(() => {
              if (this.codeMit <= 0) {
                this.codeshow = true;
                clearInterval(interval);
              }
              this.codeMit--;
            }, 1000);
          } else {
            this.$message({
              message: res.message,
              type: "warning",
              center: true
            });
          }
        });
    },
    //登陆
    login() {
      // this.$router.push("/");
      if (this.type[0]) {
        this.freeLogin = 1;
      } else {
        this.freeLogin = 0;
      }
      this.$http
        .post("login/login", {
          userName: this.number,
          password: this.code,
          companyId: this.companyId,
          freeLogin: this.freeLogin
        })
        .then(res => {
          // console.log('iiiiiiiii',res);

          if (res.code == 1) {
            let id = res.data.id;
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("id", res.data.id);
            this.$store.commit("userName", res.data.userName);
            localStorage.setItem("authorization", res.data.authorization);
            localStorage.setItem("companyId", res.data.companyId);

            //登录成功后通过当前登陆用户的id获取用户信息
            this.$http
              .post("menu/findRoleByUserId", {
                id: id,
                companyId: this.companyId
              })
              .then(res => {
                // console.log("userInfo", this.toTree(res.data));
                // res.data.
                localStorage.setItem("userInfo", JSON.stringify(res.data));
                let treeData = this.toTree(res.data);
                console.log("m416", res.data);
                console.log("98k", treeData);
                localStorage.setItem("tree", treeData);
                // localStorage.setItem("typeId", res.data.id);
                this.$store.commit("tree", this.toTree(res.data));
                this.$store.commit("userInfo", res.data);
                this.$router.push("/");
              });
              // this.$http
              // .get("user/findRoleById", { params: { id} })
              // .then(res => {
              //   // console.log("userInfo", this.toTree(res.data));
              //   // res.data.
              //   // localStorage.setItem("userInfo", JSON.stringify(res.data));
              //   // let treeData = this.toTree(res.data);
              //   // console.log("m416", res.data);
              //   // console.log("98k", treeData);
              //   // localStorage.setItem("tree", treeData);
              //   // this.$store.commit("tree", this.toTree(res.data));
              //   // this.$store.commit("userInfo", res.data);
              //   console.log(res)
              //    this.$router.push("/");
              // });
              
          } else {
            this.$message({
              message: "请核对用户信息",
              type: "error",
              center: true
            });
          }
        });
    }
  },
  created() {
    // if (window.localStorage.getItem("status") == 401) {
    //   this.$alert("登陆超时, 请重新登录", {
    //     confirmButtonText: "确定",
    //     callback: action => {
    //       // console.log(8888888);
    //       localStorage.clear();
    //       location.reload();
    //     }
    //   });
    // }
  }
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: url("../../assets/png/登录背景2.png") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  .header1 {
    font-size: 48px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(245, 245, 245, 1);
    line-height: 40px;
  }
  .header2 {
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(245, 245, 245, 1);
    line-height: 40px;
  }
}
.center {
  width: 450px;
  height: 540px;
  border-radius: 4px;
  margin: 0 auto;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.centerR {
  width: 100%;
  height: 100%;
  background:#4E72C8;

  box-shadow: 0px 0px 40px 0px rgba(3, 23, 63, 0.21);
}

.inputCenter {
  padding: 50px;
}
.inputTop {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  margin-bottom: 22px;
  img {
    width: 79px;
    height: 100%;
  }
  .title {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-left: 5%;
    .text1 {
      height: 100%;
      width: 100%;
      line-height: 200%;
      font-size: 24px;
      text-align: left;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(245, 245, 245, 1);
    }
    .text2 {
      height: 100%;
      width: 100%;
      text-align: left;
      line-height: 200%;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(245, 245, 245, 1);
    }
  }
}
.input_cont {
  padding-top: 22px;
}
.el-input {
  width: 100%;
  height: 36px;

  background-color: rgba(245, 245, 245, 1) !important;
  margin: 15px 0;
  border-radius: 4px;
  outline: none;
}
.el-checkbox-group {
  text-align: left;
  margin-bottom: 20px;
  /deep/ .el-checkbox {
    color: #fff;
  }
}
.el-button {
  width: 100%;
}
.flooter {
  color: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 20px 0;
  height: 22px;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
  .icon {
    font-size: 21px;
  }
  .text3 {
    font-size: 14px;
    display: flex;
    .lawOffice {
      display: block;
      margin: 3px 3px 0 0;

      width: 15px;
      height: 15px;
    }
  }
}
.footer {
  margin-top: 54px;
  color: rgba(255, 255, 255, 1);
}
.text5 {
  display: inline-block;
  margin-right: 50px;
}
.bottonSerch {
  display: inline-block;
  padding: 0;
  margin: 0;
}
.primary {
  height: 36px;
  line-height: 36px;
  margin-top: 40px;
  box-shadow: 0px 0px 32px 0px rgba(9, 32, 82, 0.21);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background: rgb(69, 143, 218);
  }
}
</style>
